<template>
	<div class="publicformview">
		<el-form label-width='100px' :inline="true" :disabled='blockType==3' :model="listQuery" size="mini" ref="searchForm"
			style="margin-top: 20px;">
			<el-row :gutter="24">
				<el-col :span="8">
					<el-form-item label="租金类别：" prop="rentway">
						<el-select v-model="listQuery.rentway" @change="zujinChange" value-key="classname">
							<div v-for="(item,index) in zujinleibieList">
								<el-option :label="item.classname" :value="item" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="净高(米)：" prop="height">
						<el-input v-model="listQuery.height"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="基本租金：" prop="basicrent">
						<el-input disabled v-model="listQuery.basicrent"></el-input>
						<el-tooltip class="item" effect="dark" content="单位租金 * 计租面积" placement="top">
							<i class="el-icon-warning" style="margin-left:5px"></i>
						</el-tooltip>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="结构：" prop="structure">
						<el-select v-model="listQuery.structure" @change="jiegouChange" value-key="classmid">
							<div v-for="(item,index) in jiegouList">
								<el-option :label="item.classmid" :value="item" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="埋深(米)：" prop="depth">
						<el-input v-model="listQuery.depth"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="暖气租金：" prop="heatrent">
						<el-input disabled v-model="listQuery.heatrent"></el-input>
						<el-tooltip class="item" effect="dark" content="暖气单价选“0”，则为0；暖气单价选“0.3”，则为 基本租金*0.3" placement="top">
							<i class="el-icon-warning" style="margin-left:5px"></i>
						</el-tooltip>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="地级：" prop="addresslevel">
						<el-select v-model="listQuery.addresslevel" value-key="detail" @change="dijiChange">
							<div v-for="(item,index) in dijiList" :key="index">
								<el-option :label="item.detail" :value="item" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="减收比例：" prop="reducepercent">
						<el-input v-model="listQuery.reducepercent"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="超高租金：" prop="overheightrent">
						<el-input disabled v-model="listQuery.overheightrent"></el-input>
						<el-tooltip class="item" effect="dark" content="基本租金 * 超高系数" placement="top">
							<i class="el-icon-warning" style="margin-left:5px"></i>
						</el-tooltip>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="单位租金：" prop="unitrentprice">
						<el-input disabled v-model="listQuery.unitrentprice"></el-input>
						<el-tooltip class="item" effect="dark" content="根据“租金类别”、“结构”、“地级”自动选择" placement="top">
							<i class="el-icon-warning" style="margin-left:5px"></i>
						</el-tooltip>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="超高(cm)：" prop="overheight">
						<el-input disabled v-model="listQuery.overheight"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="电梯租金：" prop="elevatorrent">
						<el-input v-model="listQuery.elevatorrent"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="暖气单价：" prop="heatunitrent">
						<el-select v-model="listQuery.heatunitrent">
							<div v-for="(item,index) in nuanqiList" :key="index">
								<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="超高系数：" prop="overheightincrease">
						<el-input disabled v-model="listQuery.overheightincrease"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="租定金额：" prop="rentprice">
						<el-input disabled v-model="listQuery.rentprice"></el-input>
						<el-tooltip class="item" effect="dark" content="基本租金 + 暖气租金 + 超高租金 + 电梯租金" placement="top">
							<i class="el-icon-warning" style="margin-left:5px"></i>
						</el-tooltip>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="bottomTop" v-if="blockType!=3">
			<el-button type="primary" size="mini" @click="handleAddUser">保存</el-button>
		</div>
	</div>
</template>

<script>
	import {
		addRoom,
		roomDetails,
		updRoom
	} from '@/api/industry'
	export default {
		props: {
			blockType: String,
			roomid: String
		},
		name: "canquanqingkuang",
		data() {
			return {
				listQuery: {
					rentway: '',
					height: '',
					basicrent: '',
					structure: '',
					depth: '',
					heatrent: '',
					addresslevel: '',
					reducepercent: '',
					overheightrent: '',
					HeatUn: '',
					unitrentprice: '',
					overheight: '',
					elevatorrent: '',
					heatunitrent: '',
					overheightincrease: '',
					rentprice: ''
				},
				total: 0,
				options: [{
					key: "1"
				}],
				listLoading: false,
				dialogVisible: false,
				isChanquan: true,
				type: 1,
				chanyeList: [],
				zujinleibieList: [],
				jiegouList: [],
				dijiList: [],
				nuanqiList: []
			};
		},

		computed: {},
		watch: {
			'listQuery.basicrent': {
				handler(newValue) {
					// 计算超高租金
					if (this.listQuery.overheightincrease && this.listQuery.reducepercent) {
						this.listQuery.overheightrent = (Number(newValue) * (Number(this.listQuery.overheightincrease) + Number(this
							.listQuery.reducepercent))).toFixed(1)
					}
					// 计算暖气
					if (this.listQuery.heatunitrent) {
						this.listQuery.heatrent = (Number(newValue) * this.listQuery.heatunitrent).toFixed(1)
						console.log(Number(newValue) * this.listQuery.heatunitrent)
					}
					// 计算租定金额
					if (this.listQuery.basicrent && this.listQuery.heatrent && this.listQuery.overheightrent && this.listQuery
						.elevatorrent) {
						this.listQuery.rentprice = (Number(this.listQuery.basicrent) + Number(this.listQuery.heatrent) + Number(this
								.listQuery.overheightrent) +
							Number(this.listQuery.elevatorrent)).toFixed(1)
					}
				}
			},
			'listQuery.heatrent': {
				handler(newValue) {
					// 计算租定金额
					if (this.listQuery.basicrent && this.listQuery.heatrent && this.listQuery.overheightrent && this.listQuery
						.elevatorrent) {
						this.listQuery.rentprice = (Number(this.listQuery.basicrent) + Number(this.listQuery.heatrent) + Number(this
								.listQuery.overheightrent) +
							Number(this.listQuery.elevatorrent)).toFixed(1)
					}
				}
			},
			'listQuery.overheightrent': {
				handler(newValue) {
					// 计算租定金额
					if (this.listQuery.basicrent && this.listQuery.heatrent && this.listQuery.overheightrent && this.listQuery
						.elevatorrent) {
						this.listQuery.rentprice = (Number(this.listQuery.basicrent) + Number(this.listQuery.heatrent) + Number(this
								.listQuery.overheightrent) +
							Number(this.listQuery.elevatorrent)).toFixed(1)
					}
				}
			},
			'listQuery.elevatorrent': {
				handler(newValue) {
					// 计算租定金额
					if (this.listQuery.basicrent && this.listQuery.heatrent && this.listQuery.overheightrent && this.listQuery
						.elevatorrent) {
						this.listQuery.rentprice = (Number(this.listQuery.basicrent) + Number(this.listQuery.heatrent) + Number(this
								.listQuery.overheightrent) +
							Number(this.listQuery.elevatorrent)).toFixed(1)
					}
				}
			},
			'listQuery.overheightincrease': {
				handler(newValue) {
					if (this.listQuery.basicrent && this.listQuery.reducepercent) {
						this.listQuery.overheightrent = (Number(this.listQuery.basicrent) * (Number(newValue) + Number(this.listQuery
							.reducepercent))).toFixed(1)
					}
				}
			},
			'listQuery.reducepercent': {
				handler(newValue) {
					if (this.listQuery.basicrent && this.listQuery.overheightincrease) {
						this.listQuery.overheightrent = (Number(this.listQuery.basicrent) * (Number(this.listQuery
							.overheightincrease) + Number(newValue))).toFixed(1)
					}
				}
			},
			'listQuery.heatunitrent': {
				handler(newValue) {
					if (this.listQuery.basicrent) {
						this.listQuery.heatrent = (Number(newValue) * this.listQuery.basicrent).toFixed(1)
						console.log(Number(newValue) * this.listQuery.basicrent)
					}

				}
			},
			'listQuery.height': {
				handler(newValue) {
					if (newValue > 4) {
						if ((newValue - 4) * 100 < 50) {

							this.listQuery.overheight = 50
							this.listQuery.overheightincrease = 0.05
						} else {
							let overheight = (newValue - 4) * 100
							this.listQuery.overheight = Number(overheight.toFixed(0))

							let segments = Math.ceil(this.listQuery.overheight / 50)
							let overheightincrease = segments * 0.05
							this.listQuery.overheightincrease = Number(overheightincrease.toString().match(/^\d+(?:\.\d{0,2})?/))
						}
					} else {
						this.listQuery.overheight = ''
						this.listQuery.overheightincrease = ''
					}
				}
			}
		},
		mounted() {
			// 遍历字典
			this.zujinleibieList = []
			this.chanyeList = JSON.parse(localStorage.getItem('chanye'))
			this.chanyeList.forEach((item, index) => {
				if (item.classname == '工商业租金' || item.classname == '行政事业租金' || item.classname == '金融业租金' || item.classname ==
					'财政拨款') {
					this.zujinleibieList.push(item)
				} else if (item.classname == '暖气租金') {
					this.nuanqiList = item.classmidList
				}
			})

			if (this.roomid) {
				localStorage.setItem('roomid', this.roomid)
				let data = {
					RoomID: this.roomid
				}
				roomDetails(data).then(res => {
					this.listQuery = res.data
					console.log(this.listQuery)
				})
			}

			if (localStorage.getItem('feizhuzaizujing')) {
				this.listQuery = JSON.parse(localStorage.getItem('feizhuzaizujing'))
			}

			setTimeout(() => {
				this.allSum(this.listQuery.basicrent)
			}, 500)
		},

		methods: {
			allSum(basicrent) {

				this.$forceUpdate();
			},
			resetForm(val) {
				console.log("1");
				this.$refs[val].resetFields();
			},
			handleAddUser() {
				let data = {
					rentway: this.listQuery.rentway,
					height: this.listQuery.height,
					basicrent: this.listQuery.basicrent,
					structure: this.listQuery.structure,
					depth: this.listQuery.depth,
					heatrent: this.listQuery.heatrent,
					addresslevel: this.listQuery.addresslevel,
					reducepercent: this.listQuery.reducepercent,
					overheightrent: this.listQuery.overheightrent,
					HeatUn: this.listQuery.HeatUn,
					unitrentprice: this.listQuery.unitrentprice,
					overheight: this.listQuery.overheight,
					elevatorrent: this.listQuery.elevatorrent,
					heatunitrent: this.listQuery.heatunitrent,
					overheightincrease: this.listQuery.overheightincrease,
					rentprice: this.listQuery.rentprice,
					roomid: localStorage.getItem('roomid')
				}
				console.log(this.blockType)
				if (this.blockType == 2) {
					updRoom(data).then(res => {
						console.log(res)
						this.$message(res.message);
					})
				} else {
					addRoom(data).then(res => {
						console.log(res)
						this.$message(res.message);
					})
				}
			},
			returns() {
				this.$router.go(-1)
			},
			// 选择类型
			selectButton(type) {
				this.type = type
			},
			zujinChange(e) {
				this.jiegouList = e.classmidList
				this.listQuery.rentway = e.classname
			},
			jiegouChange(e) {
				console.log(e)
				this.listQuery.structure = e.classmid
				this.dijiList = e.classdetailList
			},
			dijiChange(e) {
				console.log(e)
				this.listQuery.addresslevel = e.detail
				this.listQuery.unitrentprice = e.value
				let jibenxinxi = JSON.parse(localStorage.getItem('jibenxinxi'))
				this.listQuery.basicrent = Number(e.value) * Number(jibenxinxi.rentarea)
			},
		},
		beforeDestroy() {
			let data = {
				rentway: this.listQuery.rentway,
				height: this.listQuery.height,
				basicrent: this.listQuery.basicrent,
				structure: this.listQuery.structure,
				depth: this.listQuery.depth,
				heatrent: this.listQuery.heatrent,
				addresslevel: this.listQuery.addresslevel,
				reducepercent: this.listQuery.reducepercent,
				overheightrent: this.listQuery.overheightrent,
				HeatUn: this.listQuery.HeatUn,
				unitrentprice: this.listQuery.unitrentprice,
				overheight: this.listQuery.overheight,
				elevatorrent: this.listQuery.elevatorrent,
				heatunitrent: this.listQuery.heatunitrent,
				overheightincrease: this.listQuery.overheightincrease,
				rentprice: this.listQuery.rentprice,
				roomid: localStorage.getItem('roomid')
			}
			localStorage.setItem('feizhuzaizujing', JSON.stringify(data))
		}
	};
</script>

<style scoped>
	.headTop {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.xinxi {
			display: flex;
			width: 800px;
		}
	}

	.el-form-item {
		justify-content: start !important;
	}

	.el-select {
		width: 180px;
	}

	.el-input {
		width: 180px;
	}

	.el-date-picker {
		width: 180px;
	}

	.bottomTop {
		width: 100%;
		display: flex;
		justify-content: end;
	}

	.tabButton {
		background: #EFF2F7;
		color: #333333;
		border: none;
	}
</style>